<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/index_component.css" rel="stylesheet" type="text/css">
    <link href="../css/base.css" rel="stylesheet" type="text/css">
</head>
<body>


<section class="todoapp" id="todoapp">


    <!-- 疑问: 这里@add-todo='addTodo'-->
    <!--          @add-todo='addTodo($event)' 的效果是一样的-->
    <todo-header :arr-length="todos.length" @add-todo="addTodo"></todo-header>
    <todo-data :currentediting="currentEditing" :todos="todos"
               @dbl-click="dblClick" @removetodo="removeTodo" @save-edit="saveEdit">
    </todo-data>
    <todo-footer :leftcount="leftCount" @remove-all-done="removeAllDone"></todo-footer>
</section>


<script src="../js/vue.js"></script>

<script>

    var todoHeader = {
        props: ['arrLength'],
        template: `
          <header class="header">
          <h1>todos</h1>
          <input @keyup.enter="addTodo($event)" class="new-todo" placeholder="What needs to be done?">
          </header>`,
        methods: {
            addTodo: function (event) {
                console.log(event.target.value);
                var index = this.arrLength + 1;
                var todoText = event.target.value.trim();
                console.log(index);


                if (!todoText.length) {
                    return

                }

                this.$emit('add-todo', {
                    id: index,
                    title: todoText,
                    completed: false
                });
            }
        }
    }


    var todoData = {
        props: ['todos', 'currentediting'],
        template: `
          <section class="main">
          <input v-model="toggleStat1" class="toggle-all" id="toggle-all" type="checkbox">
          <label for="toggle-all">Mark all as complete</label>
          <ul class="todo-list">
            <li v-bind:class="{completed: item.completed, editing: item === currentediting}"
                v-for="(item, index) in todos" :key="item.id">
              <div class="view">
                <input class="toggle" type="checkbox" v-model="item.completed">
                <label @dblclick="doubleMethods(item)">{{ item.title }}</label>
                <button @click="removeTodoParent(index, $event)" class="destroy"></button>
              </div>
              <input @keyup.enter="saveEdit(item,index, $event)" :value="item.title" @keyup.esc="currentediting = null"
                     class="edit">
            </li>

          </ul>
          </section>`,
        methods: {
            // 3.4.2. 子组件把当前点击的里传递给父元素
            doubleMethods: function (item) {
                this.$emit('dbl-click', item);
            },

            removeTodoParent: function (index) {
                this.$emit('removetodo', index);
            },
            saveEdit: function (item, index, event) {
                let editText = event.target.value.trim();
                this.$emit("save-edit", editText, item, index);
            },
        },
        computed: {
            // 3.6.1 实现全选功能
            toggleStat1: {
                get() {
                    return this.todos.every(item => item.completed);
                },
                set(val) {
                    this.todos.forEach(item => item.completed = val);
                }
            },
        },

    }


    var todoFooter = {
        props: ['leftcount'],
        template: `
          <footer class="footer">
          <span class="todo-count">
                <strong>{{ leftcount }}</strong> item left</span>
          <ul class="filters">
            <li><a class="selected" href="#/">All</a></li>
            <li><a href="#/active">Active</a></li>
            <li><a href="#/completed">Completed</a></li>
          </ul>
          <button class="clear-completed" @click="removeAll">Clear completed</button>
          </footer>`,
        methods: {
            removeAll: function () {
                this.$emit('remove-all-done')
            }
        }
    }


    var app = new Vue({
        el: "#todoapp",
        data: {
            currentEditing: null,
            todos: [{
                id: 1,
                title: '吃饭',
                completed: false
            }, {
                id: 2,
                title: '睡觉',
                completed: false
            }, {
                id: 3,
                title: '打豆豆',
                completed: true
            }],
        },
        components: {
            'todo-header': todoHeader,
            'todo-data': todoData,
            'todo-footer': todoFooter
        },
        methods: {
            addTodo: function (item) {
                /*
                 * push()方法将一个或多个元素添加到数组的末尾并返回数组的新长度
                 * 参数：elementN – 要添加到数组末尾的元素
                 * 返回：调用方法的对象的新length属性
                 */
                let length = this.todos.push(item);

                // 清空文本框
                event.target.value = "";
            },

            /**
             * 保存编辑项
             * @param editText
             * @param item
             * @param index
             */
            saveEdit: function (editText, item, index) {
                console.log(item, index, '------------');

                // 1.拿到文件框中的数据
                // 非空校验
                // 如果为空, 则直接删除这个item
                // 如果不为空, 则修改任务项的title数据

                if (!editText.length) {
                    // 将元素直接从数据中移除
                    return this.todos.splice(index, 1);
                }

                // 2.将数据设置到任务型中
                item.title = editText;

                // 3.取出editing样式
                this.currentEditing = null;


            },
            /**
             * 把当前li的数据, 赋值给currentEditing, 即让当前li绑定类名
             * @param item
             */
            dblClick: function (item) {
                this.currentEditing = item;
            },
            /**
             * 删除任务项 根据子组件传递过来的id删除对应的数据
             * @param index
             */
            removeTodo: function (index) {
                console.log("删除" + index);
                /*
                 * 第一个参数, 从哪里删除, 第二个参数, 删除多少个
                 * this.list.splice(index, 1);
                 */
                this.todos.splice(index, 1);
            },
            clear: function () {
                this.todos.splice(0, this.list.length);
            },

            /**
             * 删除所有以完成任务项
             */
            removeAllDone() {
                this.todos = this.todos.filter(item => !item.completed);
            }
        },
        computed: {
            leftCount: function () {
                return this.todos.filter(item => !item.completed).length;
            }
        }
    });
</script>
</body>
</html>